<template>
  <div class="container">
    <div class="header">
    </div>
    <div class="body">
      <ag-grid-vue v-bind="gridOptions" @grid-ready="onGridReady">
      </ag-grid-vue>
    </div>
    <div class="footer">底部内容</div>
  </div>
</template>

<script>
// 引入 Ag-Grid Vue 组件
import { AgGridVue } from "ag-grid-vue";
import 'ag-grid-enterprise';
export default {
  name: "App",
  components: {
    AgGridVue,
  },
  data() {
    return {
      gridOptions: {
        style: { width: "100%", height: "100%" },
        class: "ag-theme-alpine", // 设置主题样式
        pinnedTopRowData: [], // 固定在顶部的行数据
        groupDefaultExpanded: -1, // 分组默认展开的层级数，设置为1仅展开第一层，设置为-1则展开所有内容
        suppressAggFuncInHeader: true, // 列标题包含聚合函数, 例如'sum(Bank Balance)' 将只是'Bank Balance'。
        // groupIncludeTotalFooter: true, // 设为true 在表格底部显示组的 总计行
        defaultColDef: {
          // 默认列定义，所有列都继承这些配置
          resizable: true, // 列可调整大小
          suppressMenu: true // 不显示列菜单
        },
        autoGroupColumnDef: { // 自动分组列定义
          headerName: 'Group/Name',
          field: 'city',
          cellRenderer: 'agGroupCellRenderer',
          cellRendererParams: {
            suppressCount: true // 设为true 则组名称旁边不显示行计数
          }
        },
        columnDefs: [
          {
            headerName: '姓名',
            field: 'name',
          },
          {
            headerName: '性别',
            field: 'sex',
            valueFormatter(item) {
              if (item.value == 0) return "男";
              if (item.value == 1) return "女";
              return "";
            }
          },
          {
            headerName: '年龄',
            field: 'age',
          },
          {
            headerName: '金牌',
            field: 'gold',
            aggFunc: 'sum'
          },
          {
            headerName: '银牌',
            field: 'silver',
            // 聚合函数
            aggFunc(params) {
              // console.log('aggFunc values=', params);
              return params.values.reduce((a, b) => a + b, 0);
            }
          },
          {
            headerName: '省份',
            field: 'province',
            rowGroup: true, // 省份分组
            rowGroupIndex: 0, // 省份分组索引
            hide: true // 隐藏该列
          },
          {
            headerName: '城市',
            field: 'city',
            hide: true // 隐藏该列
          },
          {
            headerName: '地址',
            field: 'dz'
          },
        ],
        rowData: [
          { name: '张三', sex: '0', age: '100', province: '浙江', city: '杭州', 'dz': '古墩路1号', gold: 2, silver: 3 },
          { name: '李四', sex: '1', age: '5', province: '浙江', city: '杭州', 'dz': '古墩路12号', gold: 1, silver: 2 },
          { name: '王五', sex: '1', age: '20', province: '浙江', city: '宁波', 'dz': '古墩路31号', gold: 0, silver: 4 },
          { name: '赵六', sex: '0', age: '60', province: '浙江', city: '金华', 'dz': '古墩路45号', gold: 2, silver: 0 },
          { name: '李花花', sex: '0', age: '40', province: '江苏', city: '南京', 'dz': '南京路1号', gold: 1, silver: 1 },
          { name: '王翠翠', sex: '0', age: '30', province: '江苏', city: '南京', 'dz': '虹星路35号', gold: 1, silver: 0 },
          { name: '王翠翠', sex: '0', age: '30', province: '江苏', city: '南京', 'dz': '虹星路35号', gold: 4, silver: 0 },
          { name: '王翠翠', sex: '0', age: '30', province: '江苏', city: '南京', 'dz': '虹星路35号', gold: 1, silver: 0 },
          { name: '王翠翠', sex: '0', age: '30', province: '江苏', city: '苏州', 'dz': '虹星路35号', gold: 1, silver: 0 },
        ],
      },
      gridApi: null, // 网格 API
      columnApi: null, // 列 API
    };
  },
  mounted() {
    this.gridOptions.pinnedTopRowData = [{
      city: '总计',
      gold: this.gridOptions.rowData.reduce((sum, row) => sum + row.gold, 0),
      silver: this.gridOptions.rowData.reduce((sum, row) => sum + row.silver, 0)
    }];
  },
  methods: {
    /**
     * 网格准备就绪事件
     * @param params
     */
    onGridReady(params) {
      console.log("网格准备就绪", params);
      this.gridApi = params.api;
      this.columnApi = params.columnApi;
      this.gridApi.sizeColumnsToFit(); // 列宽自适应
    },
  },
};
</script>

<style>
/* .ag-theme-alpine .ag-ltr .ag-cell,
.ag-theme-alpine .ag-header-cell,
.ag-theme-alpine .ag-header-group-cell {
  border-right-color: inherit;
} */
/* 将组标题居中对齐 */
.ag-theme-alpine .ag-header-group-cell-label {
  justify-content: center;
}
</style>

<style lang="scss" scoped>
.container {
  box-sizing: border-box;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;

  .header {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
    margin-bottom: 10px;
  }

  .body {
    width: 100%;
    flex: 1;
    margin-bottom: 10px;
  }

  .footer {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid #ccc;
  }
}
</style>
